html,
body {
  font: 12px arial;
  margin: 0;
  padding: 0;
  background-color: #fff;
  height: 100%;
  overflow-x: hidden;
}

a {
  color: #000000;
}

a:hover {
  color: #fa5e20
}
.copy{
  cursor: pointer;
}
.copy:hover{
  color: #00EE00;
}
$defaultTitleHeight: 40px;

.container {
  height: 100%;
  position: relative;

  $table-select-width: 280px;
  .table-select {
    width: $table-select-width;
    height: 100%;
    background-color: #ffffff;
    border: 3px solid #95b3d7;
    border-top: 0px;
    margin-top: -3px;
    -moz-box-shadow: 0px 0px 3px #000000;
    -webkit-box-shadow: 0px 0px 3px #000000;
    box-shadow: 0px 0px 3px #000000;

    position: relative;
    z-index: 2;

    overflow: hidden;

    .tab-nav {
      height: 34px;
      margin-top: 3px;
      border-top: 3px solid #95b3d7;
      background-color: #95b3d7;
      div {
        cursor: pointer;
        float: left;
        height: 30px;
        line-height: 30px;
        color: #ffffff;
        width: 33%;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        background-color: #4f81bd;
        &.middle {
          width: 34%;
        }
        &.active {
          background-color: #5a92d6;
        }
        &:hover {
          background-color: #95b3d7;
        }
      }
    }
    .tab-content {
      width: 100%;
      overflow-y: auto;
      padding: 0px;
      position: absolute;
      z-index: 3;
      bottom: 0px;
      top: 40px;

      ul {
        margin: 0px;
        width: 100%;
        display: none;
        padding: 0;
        padding-bottom: 80px;
        position: relative;
        &.show {
          display: block;
        }
        li {
          position: relative;
          list-style: none;
          $height: 28px;
          height: $height;
          line-height: $height;
          border-bottom: 1px solid #95b3d7;
          padding: 0px;
          -moz-user-select:none;/*火狐*/
          -webkit-user-select:none;/*webkit浏览器*/
          -ms-user-select:none;/*IE10*/
          -khtml-user-select:none;/*早期浏览器*/
          user-select:none;
          &:hover {
            color: #fa5e20;
            .zero-copy{
              display: block;
            }
          }
          &.active {
            color: #00EE00;
          }
          .zero-copy{
            cursor: pointer;
            text-align: center;
            height: $height;
            width: 40px;
            position: absolute;
            top: 0px;
            right: 0px;
            display: none;
          }
          i {
            width: 30px;
            display: inline-block;
            text-align: center;
            font-style: normal;
            color: #95b3d7;
          }
          p {
            margin: 0px;
            width: 100%;
            cursor: pointer;
            text-decoration: none;
            -webkit-margin-before: 0;
            -webkit-margin-after: 0;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
            height: 28px;
            line-height: 28px;
          }
          p.hover {
            color: #fa5e20;
          }
          p.active {
            color: #00EE00;
            font-size: 1.1em;
          }
        }
      }
    }

  }

  .row-position {
    width: 100%;
    height: 100%;
    top: 0px;
    position: absolute;
    padding-left: $table-select-width + 12;
    box-sizing: border-box;
    overflow: hidden;
  }
  .table-pub {
    h2 {
      position: fixed;
      width: 100%;
    }
    .table-row{
      width: 100%;
      height: 100%;
      position: relative;
    }
    .table {
      width: 100%;
      position: absolute;
      overflow-y: scroll;
      top: $defaultTitleHeight + 6;
      bottom: 0px;
    }
  }

  .table-list {
    @extend .row-position;
    @extend .table-pub;
    &.show {
      display: block;
    }
  }

  .table-desc {
    @extend .row-position;
    @extend .table-pub;
    &.show {
      display: block;
    }
  }

  h2 {
    height: $defaultTitleHeight;
    line-height: $defaultTitleHeight;
    margin: 0px;
    background-color: #4f81bd;
    color: #fff;
    font-family: "Microsoft YaHei", arial;
    text-indent: .5em;
    margin-bottom: 10px;
    -moz-box-shadow: 0px 3px 0px #dddddd;
    -webkit-box-shadow: 0px 3px 0px #dddddd;
    box-shadow: 0px 3px 0px #dddddd;
  }

  table {
    min-width: 40%;
    border-spacing: 0;
    border-collapse: collapse;
    border: 2px solid #95b3d7;
    margin-bottom: 10px;
    background-color: #ffffff;
    th {
      line-height: 27px;
      white-space: nowrap;
      background-color: #95b3d7;
      color: #fff;
      font-weight: normal
    }
    tr {
      line-height: 25px
    }
    th,
    td {
      border: 1px solid #95b3d7;
      text-align: left;
      text-indent: 1em;
      padding-right: 1em;
      p{
        height: 27px;
        line-height: 27px;
        -webkit-margin-before: 0em;
        -webkit-margin-after: 0em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
      }
    }
    td.hover {
      background-color: #95b3d7;
      color: #ffffff
    }
    td.active {
      font-size: 1.4em;
      color: #00EE00;
    }
    td {
      a.hover {
        color: #fa5e20;
      }
    }
  }
  .tools{
    position: fixed;
    right: 0px;
    bottom: 0px;
    width: 80px;
    height: 80px;
    margin-right: 18px;
    margin-bottom: 200px;
    div{
      width: 100%;
      height: 30px;
      line-height: 30px;
      border-radius: 3px;
      color: #ffffff;
      text-align: center;
      margin-top: 8px;
      cursor: pointer;
      background:rgba(79, 129, 189, 0.6)!important;
      filter:alpha(opacity=60);
      -moz-opacity:0.6;
      -khtml-opacity: 0.6;
      opacity: 0.6;
      &:hover{
        filter:alpha(opacity=100);
        -moz-opacity:1;
        -khtml-opacity: 1;
        opacity: 1;
      }
    }
  }
}